<template>
  <div class="container">
    <hr>
    <!-- 发表评论 -->
    <div class="comment-head">
      <div class="up-area">
        <div class="headicon">
          <img src="@/assets/img/headicon.jpg" />
        </div>
        <textarea name="" id="main-input" cols="0" rows="0"
                  @focus="getdian(1)" @blur="losedian(1)" @input="opeinput(1)" v-model="usercomment"
                  placeholder="输入评论（Enter换行，Ctrl + Enter发送)"></textarea>
      </div>
      <div class="down-area app-container">
        <div class="left">
          <span><i class="el-icon-picture-outline"></i>图片</span>
          <span type="text" size="mini" @click="showDialog = !showDialog">😃表情</span>
        </div>
        <div class="mumu">
          <el-col style="position: absolute; top:150px; left:100px;">
            <VEmojiPicker v-show="showDialog" @select="selectEmoji"/>
          </el-col>
        </div>
        <div class="right">
          <span>Crtl + Enter</span>
          <button id="maBtn" @click="sendtalk">发表评论</button>
        </div>
      </div>
    </div>
    <!-- 全部回复列表star -->
    <div class="s_hotlist">
      <div class="s_hottit">全部评论（{{talklist.length}}）</div>
      <div class="s_all" v-for="(items,k) in replyarr" :key="k">
        <div class="s_replylist">
          <div class="s_talkbody">
            <div class="s_hotpicbox">
              <img src="@/assets/img/headicon.jpg" />
            </div>
            <div class="s_hottxt">
              <div class="s_hotnav">
                <p class="s_hotname">{{items.nick_name}}</p>
                <p class="s_vertical"></p>
                <p class="s_hotpost">职业</p>
                <p class="s_vertical"></p>
                <p class="s_hottime">{{getLocalTime(items.created_at)}}</p>
              </div>
              <p class="s_hotword">{{items.comment_info}}</p>
              <div class="s_iconhotbox">
                <div class="s_hoticon">
                  <i class="el-icon-check"></i>
                  <p>1</p>
                </div>
                <div class="s_hoticon" @click="onejudelist(k)">
                  <i class="el-icon-chat-round"></i>
                  <p>回复</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 添加一级回复 -->
          <div class="s_onereply" :class="{s_hh:items.judeone}">
            <div class="one_head s_one_head">
              <div class="one_up s_one_up">
                                <textarea name="" class="one_main s_one_main" cols="0" rows="0"
                                          @focus="getdian(4,k)" @blur="losedian(4,k)" @input="opeinput(4,k)" v-model="items.onealltalk"
                                          placeholder="输入评论（Enter换行，Ctrl + Enter发送)"></textarea>
              </div>
              <div class="one_down s_one_down">
                <div class="one_left s_one_left">
                  <span class="tp"><i class="el-icon-picture-outline"></i>图片</span>
                  <span type="text" size="mini" @click="oneDig(k)" class="bq">😃表情</span>
                </div>
                <div class="mumu">
                  <el-col style="position: absolute; top:60px; left:100px;">
                    <VEmojiPicker v-show="oneDigarr[k]" @select="allselectEmoji"/>
                  </el-col>
                </div>
                <div class="one_right s_one_right">
                  <span>Crtl + Enter</span>
                  <button class="one_maBtn s_one_maBtn" @click="getreply(k)">发表评论</button>
                </div>
              </div>
            </div>
          </div>
          <!-- 全部回复列表star -->
          <div class="s_reply" v-for="(item,i) in talklistA[k]" :key="i">
            <div class="s_hotreply">
              <div class="s_replypic">
                <img src="@/assets/img/headicon.jpg" />
              </div>
              <div class="s_replyword">
                <div class="s_replynav">
                  <p class="s_replyuser">{{item.nick_name}}</p>
                  <p class="s_vertical"></p>
                  <p class="s_replytime">时间</p>
                </div>
                <p class="s_hotword">{{item.comment_info}}</p>
                <div class="s_iconhotbox">
                  <div class="s_hoticon">
                    <i class="el-icon-check"></i>
                    <p>1</p>
                  </div>
                  <div class="s_hoticon" @click="twojudelist(k,i)">
                    <i class="el-icon-chat-round"></i>
                    <p>回复</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 二级回复 -->
            <div :class="item.judetwo ? 's_secondreply' : ''">
              <div class="two_head s_two_head">
                <div class="two_up s_two_up">
                                    <textarea name="" class="two_main s_two_main" cols="0" rows="0"
                                              @focus="getdian(5,k,i)" @blur="losedian(5,k,i)" @input="opeinput(5,k,i)" v-model="item.twoalltalk"
                                              placeholder="输入评论（Enter换行，Ctrl + Enter发送)"></textarea>
                </div>
                <div class="two_down s_two_down">
                  <div class="two_left s_two_left">
                    <span class="tp"><i class="el-icon-picture-outline"></i>图片</span>
                    <span type="text" size="mini" @click="twoDig(k)" class="bq">😃表情</span>
                  </div>
                  <div class="mumu">
                    <el-col style="position: absolute; top:60px; left:100px;">
                      <VEmojiPicker v-show="twoDigarr[k]" @select="allselectEmojiA"/>
                    </el-col>
                  </div>
                  <div class="two_right s_two_right">
                    <span>Crtl + Enter</span>
                    <button class="two_maBtn s_two_maBtn" @click="getreplyA(k,i)">发表评论</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 全部回复列表end -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { allUse } from '@/requests/apis'
import {VEmojiPicker} from 'v-emoji-picker'
let secCommentsReq = [];
export default {
  components: {
    VEmojiPicker
  },
  data(){
    return{
      // // 回复
      // talkreply:'回复',
      // 判断input框中是否存在内容
      judeinp:false,

      // 获取评论列表
      talklist:[],
      // 二级评论列表
      talklistA:[],

      // 二级评论请求
      twobqarr:[],

      twohh:{},

      // 渲染评论列表
      replyarr:[],


      // 一级回复父级id列表
      fatherarr:[],

      // 一级
      judeone:true,
      // 二级
      judetwo:true,

      // 获取一级回复列表
      oneinfo:{},

      // 用户评论内容
      usercomment:'',

      // 表情包弹窗
      showDialog: false,
      showDialogA: false,
      showDialogB:false,
      showDialogC: false,
      showDialogD:false,

      // 一级回复弹窗
      oneDigarr:[],
      // 二级回复弹窗
      twoDigarr:[],

      // 一级热评回复类容
      onehottalk:'',
      // 二级热评回复类容
      twohottalk:'',

      // 一级回复列表
      onealltalk:'',

      // 二级回复列表
      twoalltalk:'',
    }
  },
  methods:{
    getLocalTime(nS) {
      return new Date(parseInt(nS)*1000).getFullYear()+'年'
          +(new Date(parseInt(nS)*1000).getMonth()+1)+'月'
          +new Date(parseInt(nS)*1000).getDate()+'日';
    },
    // 发表评论
    selectEmoji(emoji) {
      let input = document.getElementById("main-input")
      let startPos = input.selectionStart
      let endPos = input.selectionEnd
      let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
      input.value = resultText
      input.focus()
      input.selectionStart = startPos + emoji.data.length
      input.selectionEnd = startPos + emoji.data.length
    },
    // 热评评论
    hotselectEmoji(emoji) {
      let input = document.querySelector(".one_main")
      let startPos = input.selectionStart
      let endPos = input.selectionEnd
      let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
      input.value = resultText
      input.focus()
      input.selectionStart = startPos + emoji.data.length
      input.selectionEnd = startPos + emoji.data.length
      this.onehottalk = resultText
    },
    hotselectEmojiA(emoji) {
      let input = document.querySelector(".two_main")
      let startPos = input.selectionStart
      let endPos = input.selectionEnd
      let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
      input.value = resultText
      input.focus()
      input.selectionStart = startPos + emoji.data.length
      input.selectionEnd = startPos + emoji.data.length
      this.twohottalk = resultText
    },
    // 全部评论
    allselectEmoji(emoji){
      let input = document.querySelector(".one_main")
      let startPos = input.selectionStart
      let endPos = input.selectionEnd
      let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
      input.value = resultText
      input.focus(emoji)
      input.selectionStart = startPos + emoji.data.length
      input.selectionEnd = startPos + emoji.data.length
      //   this.onelistarr[0] += resultText
    },
    allselectEmojiA(emoji){
      let input = document.querySelector(".two_main")
      let startPos = input.selectionStart
      let endPos = input.selectionEnd
      let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
      input.value = resultText
      input.focus()
      input.selectionStart = startPos + emoji.data.length
      input.selectionEnd = startPos + emoji.data.length
      //    this.twolistarr[0] += resultText
    },
    // 返回单个dom节点
    a(selector) {
      return document.querySelector(selector)
    },
    // 返回相同的列表节点
    A(selector) {
      return document.querySelectorAll(selector)
    },
    // 发送评论
    sendtalk(){
      // 获取评论接口
      axios({
        url:'http://api_devss.wanxikeji.cn/api/addComment',
        method:'post',
        data:{
          token:this.$getSession().token,
          comment_info:this.usercomment,
          article_id:this.$route.params.artId
        }
      }).then((res)=>{
        console.log(res);
        allUse('/api/articleInfo','post',{
          article_id:this.$route.params.artId,
          page:1,
          size:10
        }).then(()=>{
          allUse('/api/articleInfo','post',{
            article_id:this.$route.params.artId,
            page:1,
            size:10
          }).then((res)=>{
            this.talklist = res.data.data.data;
            this.talklist.forEach(el=>{
              this.twobqarr.push(el.comment_id);
              this.fatherarr.push(el.comment_id);
              this.oneinfo = {...el,judeone:true};
            });
            this.replyarr.push(this.oneinfo);
          })
        })
      }).catch((err)=>{
        console.log(err);
      })
    },
    // 获取一级评论列表
    getcomment(){
      allUse('/api/articleInfo','post',{
        article_id:this.$route.params.artId,
        page:1,
        size:10
      }).then((res)=>{
        this.talklist = res.data.data.data;
        this.talklist.forEach(el=>{
          this.twobqarr.push(el.comment_id);
          this.fatherarr.push(el.comment_id);
          this.oneinfo = {...el,judeone:true};
          this.replyarr.push(this.oneinfo);
        });
        // 并发解决axios返回值问题
        for(let i=0;i<this.twobqarr.length;i++){
          secCommentsReq.push(this.getcommentA(this.twobqarr[i]))
        }
        axios.all(secCommentsReq).then(res=>{
          res.forEach(el=>{
            this.talklistA.push(el.data.data.data);
            this.talklistA.forEach(ele=>{
              ele.forEach(element=>{
                element = {...element,judetwo:true};
                ele.push(element);
              })
              ele.splice(0,ele.length/2);//不能删除
            })
            console.log(this.talklistA);
          })
        })
      }).catch((err)=>{
        console.log(err);
      })
    },

    // 二级评论并发接口
    getcommentA(el){
      return allUse('/api/articleInfo','post',{
        article_id:this.$route.params.artId,
        page:1,
        // size:2,
        father_id:el
      })
    },

    // 二级评论刷新渲染
    aaa(index){
      allUse('/api/articleInfo','post',{
        article_id:this.$route.params.artId,
        father_id:this.twobqarr[index]
      }).then((res)=>{
        let twoobj = {};
        let twoarr = [];
        twoarr=res.data.data.data;
        twoarr.forEach(el=>{
          twoobj = {...el,judetwo:true};
          twoarr.push(twoobj);
        });
        const hh = [...this.talklistA];
        // hh[index][i].judetwo = true;
        this.talklistA = hh;
        twoarr.splice(0,twoarr.length/2);
        this.talklistA[index]=twoarr;
        return this.talklistA;
      })
    },
    // 二级回复
    getreply(index){
      allUse('/api/addComment','post',{
        token:this.$getSession().token,
        comment_info:this.replyarr[index].onealltalk,
        article_id:this.$route.params.artId,
        father_id:this.fatherarr[index]
      }).then((res)=>{
        console.log(res);
        this.aaa(index);
      }).catch((err)=>{
        console.log(err);
      })
    },

    // 二级回复
    getreplyA(index,i){
      allUse('/api/addComment','post',{
        token:this.$getSession().token,
        comment_info:this.talklistA[index][i].twoalltalk,
        article_id:this.$route.params.artId,
        father_id:this.fatherarr[index]
      }).then((res)=>{
        console.log(res);
        this.aaa(index,i);
      }).catch((err)=>{
        console.log(err);
      })
    },
    // 获得焦点
    getdian(index,k){
      if(index == 1){
        // 发表评论
        this.a('#main-input').style.backgroundColor = '#fff'
        this.a('#main-input').style.border = '1px solid blue'
        this.A('.left span')[0].style.visibility = 'visible'
        this.A('.left span')[1].style.visibility = 'visible'
        this.a('.right span').style.visibility = 'visible'
        this.a('#maBtn').style.backgroundColor = '#ABCDFF'
      }else if(index == 2){
        this.a('.one_main').style.backgroundColor = '#fff'
        this.a('.one_main').style.border = '1px solid blue'
        this.A('.one_left span')[0].style.visibility = 'visible'
        this.A('.one_left span')[1].style.visibility = 'visible'
        this.a('.one_right span').style.visibility = 'visible'
        this.a('#one_maBtn').style.backgroundColor = '#ABCDFF'
      }else if(index == 3){
        this.a('.two_main').style.backgroundColor = '#fff'
        this.a('.two_main').style.border = '1px solid blue'
        this.A('.two_left span')[0].style.visibility = 'visible'
        this.A('.two_left span')[1].style.visibility = 'visible'
        this.a('.two_right span').style.visibility = 'visible'
        this.a('.two_maBtn').style.backgroundColor = '#ABCDFF'
      }else if(index == 4){
        this.A('.s_one_main')[k].style.backgroundColor = '#fff'
        this.A('.s_one_main')[k].style.border = '1px solid blue'
        this.A('.s_one_left .bq')[k].style.visibility = 'visible'
        this.A('.s_one_left .tp')[k].style.visibility = 'visible'
        this.A('.s_one_right span')[k].style.visibility = 'visible'
        this.A('.s_one_maBtn')[k].style.backgroundColor = '#ABCDFF'
      }
      // else if(index == 5){
      //     this.A('.s_two_main')[i].style.backgroundColor = '#fff'
      //     this.A('.s_two_main')[i].style.border = '1px solid blue'
      //     this.A('.s_two_left .bq')[i].style.visibility = 'visible'
      //     this.A('.s_two_left .tp')[i].style.visibility = 'visible'
      //     this.A('.s_two_right span')[i].style.visibility = 'visible'
      //     this.A('.s_two_maBtn')[i].style.backgroundColor = '#ABCDFF'
      // }
    },
    // 失去焦点
    losedian(index,k){
      if(index == 1){
        if(this.a('#main-input').value === ''){
          this.a('#main-input').style.backgroundColor = '#F4F5F5'
          this.a('#main-input').style.border = '1px solid #fff'
          this.a('.right span').style.visibility = 'hidden'
          this.a('#maBtn').style.backgroundColor = '#c9cdd4'
        }
      }else if(index == 2){
        if(this.a('.one_main').value === ''){
          this.a('.one_main').style.backgroundColor = '#F4F5F5'
          this.a('.one_main').style.border = '1px solid #fff'
          this.a('.one_right span').style.visibility = 'hidden'
          this.a('#one_maBtn').style.backgroundColor = '#c9cdd4'
        }
      }else if(index == 3){
        if(this.a('.two_main').value === ''){
          this.a('.two_main').style.backgroundColor = '#F4F5F5'
          this.a('.two_main').style.border = '1px solid #fff'
          this.a('.two_right span').style.visibility = 'hidden'
          this.a('.two_maBtn').style.backgroundColor = '#c9cdd4'
        }
      }
      else if(index == 4){
        if(this.A('.s_one_main')[k].value === ''){
          this.A('.s_one_main')[k].style.backgroundColor = '#F4F5F5'
          this.A('.s_one_main')[k].style.border = '1px solid #fff'
          this.A('.s_one_right span')[k].style.visibility = 'hidden'
          this.A('.s_one_maBtn')[k].style.backgroundColor = '#c9cdd4'
        }
      }
      // else if(index == 5){
      //     if(this.A('.s_two_main')[i].value === ''){
      //         this.A('.s_two_main')[i].style.backgroundColor = '#F4F5F5'
      //         this.A('.s_two_main')[i].style.border = '1px solid #fff'
      //         this.A('.s_two_right span')[i].style.visibility = 'hidden'
      //         this.A('.s_two_maBtn')[i].style.backgroundColor = '#c9cdd4'
      //     }
      // }

    },
    // 操作input输入框
    opeinput(index,k){
      if(index == 1){
        if (this.a('#main-input').value !== '') {
          this.a('#maBtn').style.cursor = 'pointer'
          this.a('#maBtn').style.backgroundColor = '#1E80FF'
        } else {
          this.a('#maBtn').style.backgroundColor = '#ABCDFF'
          this.a('#maBtn').style.cursor = 'not-allowed'
        }
      }else if(index == 2){
        if (this.a('.one_main').value !== '') {
          this.a('#one_maBtn').style.cursor = 'pointer'
          this.a('#one_maBtn').style.backgroundColor = '#1E80FF'
        } else {
          this.a('#one_maBtn').style.backgroundColor = '#ABCDFF'
          this.a('#one_maBtn').style.cursor = 'not-allowed'
        }
      }else if(index == 3){
        if (this.a('.two_main').value !== '') {
          this.a('.two_maBtn').style.cursor = 'pointer'
          this.a('.two_maBtn').style.backgroundColor = '#1E80FF'
        } else {
          this.a('.two_maBtn').style.backgroundColor = '#ABCDFF'
          this.a('.two_maBtn').style.cursor = 'not-allowed'
        }
      }else if(index == 4){
        if (this.A('.s_one_main')[k].value !== '') {
          this.A('.s_one_maBtn')[k].style.cursor = 'pointer'
          this.A('.s_one_maBtn')[k].style.backgroundColor = '#1E80FF'
        } else {
          this.A('.s_one_maBtn')[k].style.backgroundColor = '#ABCDFF'
          this.A('.s_one_maBtn')[k].style.cursor = 'not-allowed'
        }
      }
      // else if(index == 5){
      //     if (this.A('.s_two_main')[i].value !== '') {
      //         this.A('.s_two_maBtn')[i].style.cursor = 'pointer'
      //         this.A('.s_two_maBtn')[i].style.backgroundColor = '#1E80FF'
      //     } else {
      //         this.A('.s_two_maBtn')[i].style.backgroundColor = '#ABCDFF'
      //         this.A('.s_two_maBtn')[i].style.cursor = 'not-allowed'
      //     }
      // }

    },
    // 判断是否显示回复框——热评一级
    onejudereply(){
      // 控制热评
      if(this.judeone){
        this.judeone = !this.judeone;
      }else if(this.judeone == false){
        this.judeone = true;
        return this.judeone;
      }
    },
    // 判断是否显示回复框——热评二级
    twojudereply(){
      if(this.judetwo){
        this.judetwo = !this.judetwo;
      }else if(this.judetwo == false){
        this.judetwo = true;
        return this.judetwo;
      }
    },
    // 判断是否显示回复框——列表一级
    onejudelist(index){
      if(this.replyarr[index].judeone){
        this.replyarr[index].judeone = !this.replyarr[index].judeone;
      }else if(this.replyarr[index].judeone == false){
        this.replyarr[index].judeone = true;
        return this.replyarr[index].judeone;
      }

    },
    // 判断是否显示回复框——列表二级
    twojudelist(index,i){
      const newList = [...this.talklistA]
      newList[index][i].judetwo = !newList[index][i].judetwo
      console.log(newList[index][i].judetwo)
      this.talklistA = [...newList]
    },
    // 数组下标弹窗
    oneDig(index){
      for(let i=0;i<this.replyarr.length;i++){
        this.oneDigarr.push(this.showDialogC);
      }
      if(this.oneDigarr[index] == false){
        this.oneDigarr[index] = true;
      }else if(this.oneDigarr[index] == true){
        this.oneDigarr[index] = false;
      }
      return this.oneDigarr[index];
    },
    twoDig(index){
      for(let i=0;i<this.replyarr.length;i++){
        this.twoDigarr.push(this.showDialogD);
      }
      if(this.twoDigarr[index] == false){
        this.twoDigarr[index] = true;
      }else if(this.twoDigarr[index] == true){
        this.twoDigarr[index] = false;
      }
      return this.twoDigarr[index];
    },
  },
  mounted(){
    this.getcomment();
  },

}
</script>

<style>
.container{
  margin: 80px auto;
  background-color: #fff;
}
.container .comment-head{
  visibility: visible;
  padding:25px 0;
  position: relative;
}
.container .comment-head::after{
  content: '';
  display: block;
  height: 1px;
  width: calc(100% + 48px);
  background-color: #E5E6EB;
  position: absolute;
  bottom: 0;
  left: -24px;
}
.up-area{
  display: flex;
  justify-content: space-between;
}
.up-area .headicon{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.headicon img{
  width: 100%;
  height: 100%;
}
.up-area textarea{
  width: 650px;
  min-height: 55px;
  background-color: #F4F5F5;
  border: 1px solid #fff;
  outline: none;
  text-indent: 1em;
  resize: none;
  font-size: 14px;
  padding: 10px 0;
  font-family: sans-serif;
  overflow: hidden;
}
.down-area{
  visibility: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}
.down-area .left{
  font-size: 14px;
  color: #4e5969;
  margin-left: 50px;
}
.left span{
  cursor: pointer;
  visibility: hidden;
}
.left span:last-child{
  margin-left: 15px;
}
.right span{
  font-size: 14px;
  margin-right: 10px;
  color: #86909c;
  font-size:16px;
  visibility: hidden;
}
.right button{
  width: 92px;
  height: 36px;
  border: none;
  background-color: #c9cdd4;
  color: #fff;
  cursor: pointer;
}

.comment-body{
  padding-bottom: 25px;
}
.comment-body::before{
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background-color: #E5E6EB;

}
.comment-body h2{
  font-size: 16px;
  font-weight: 500;
  color: #1d2129;
  padding-top: 25px;
}

.one-head{
  margin-left: 15px;
  /* display: flex; */
  position: relative;
  padding: 15px 0;
}
.one-head:not(:last-child)::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: #E5E6EB;
  position: absolute;
  bottom: 0px;
}
.one-head .one-head-img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-top: 5px;
}
.one-head .one-head-img img{
  width: 100%;
  height: 100%;
}
.one-head .one-right-msg{
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}
.one-head .one-right-msg div{
  margin-bottom: 10px;
}
.user-msg{
  font-size: 14px;
  color: #1d2129;
}
.user-msg .msg-light{
  color: #86909c;
}
.comment-content{
  font-size: 14px;
  color: #4e5969;
}
.comment-icon{
  color: #4e5969;
  font-size: 12px;
  cursor: pointer;
}
.comment-icon span:first-child{
  margin-right: 10px;
}

.one-head ul{
  background-color: #F7F8FA;
  padding: 10px;
  margin-left: 45px;
}
.one-head ul li{
  position: relative;
  padding-top: 10px;
}
.one-head ul li:not(:last-child)::after{
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background-color: #E5E6EB;
  position: absolute;
  bottom: 0px;
}

/* 二级评论样式 */
.two-head-img{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  float: left;
  margin-top: 5px;
}
.two-head-img img{
  width: 100%;
  height: 100%;
}
.two-right-msg{
  display: flex;
  flex-direction: column;
  margin-left: 50px;
}
.two-right-msg div{
  margin-bottom: 10px;
}
.two-right-msg .user-msg{
  font-size: 14px;
  color: #1d2129;
}
.two-right-msg .user-msg .msg-light{
  color: #86909c;
}
.two-right-msg .comment-content{
  font-size: 14px;
  color: #4e5969;
}
.two-right-msg .comment-icon{
  color: #4e5969;
  font-size: 12px;
  cursor: pointer;
}
.two-right-msg .comment-icon span:first-child{
  margin-right: 10px;
}


/*.one-child-comment{*/
/*  background-color: #F4F5F5;*/
/*  padding: 10px 10px 0 10px;*/
/*  display: none;*/
/*}*/
.one-child-comment input{
  width: 650px;
  min-height: 30px;
  background-color: #fff;
  border: 1px solid #fff;
  outline: none;
  text-indent: 1em;
  resize: none;
  font-size: 14px;
  padding: 10px 0;
  font-family: sans-serif;
  overflow: hidden;
}
.one-child-comment .down-area span{
  visibility: visible;
}
.one-child-comment .down-area .left{
  margin-left: 0;
}

/* 热门评论样式 */
.s_hotlist{
  width: 700px;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 60px;
  border-bottom: 1px solid red;
}
.s_hottit{
  font-size: 16px;
  color: #333;
  margin: 20px 0;
}
.s_allreply{
  padding: 20px 0;
  border-bottom: 1px solid red;
}
.s_talkbody{
  display: flex;
  clear: both;
  overflow: hidden;
}
.s_hotpicbox{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 20px;
}
/* 一级评论回复窗口 */
.s_onereply{
  width: 650px;
  box-sizing: border-box;
  margin-left: 50px;
  padding: 10px;
  background: rgb(247, 248, 250);
}
.s_hh{
  display: none;
}
.s_onereply .one_head{
  visibility: visible;
  padding:25px 0;
}
.s_onereply .onp_up{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.one_up textarea{
  width: 630px;
  min-height: 55px;
  background-color: #F4F5F5;
  border: 1px solid #fff;
  outline: none;
  text-indent: 1em;
  resize: none;
  font-size: 14px;
  padding: 10px 0;
  font-family: sans-serif;
  overflow: hidden;
}
.one_down{
  position: relative;
  visibility: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}
.one_down .one_left{
  font-size: 14px;
  color: #4e5969;
  margin-left: 50px;
}
.one_left span{
  cursor: pointer;
  visibility: hidden;
}
.one_left span:last-child{
  margin-left: 15px;
}
.one_right span{
  font-size: 14px;
  margin-right: 10px;
  color: #86909c;
  font-size:16px;
  visibility: hidden;
}
.one_right button{
  width: 92px;
  height: 36px;
  border: none;
  background-color: #c9cdd4;
  color: #fff;
  cursor: pointer;
}
/* 一级评论回复end */
.s_hotpicbox img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.s_hottxt{
  display: flex;
  flex-direction: column;
}
.s_hotnav{
  display: flex;
  align-items: center;
}
.s_vertical{
  height: 14px;
  width: 1px;
  background: gainsboro;
  margin: 0px 10px;
}
.s_hotnav p{
  font-size: 14px;
  color: #777;
}
.s_hotnav .s_hotname{
  font-weight: bold;
  color: #333;
}
.s_hotword{
  margin: 15px 0px;
  font-size: 14px;
  color: #777;
}
.s_iconhotbox{
  display: flex;
}
.s_hoticon{
  display: flex;
  align-items: center;
  color: #777;
  margin-right: 20px;
  cursor: pointer;
}
/* 热门回复 */
.s_reply{
  width: 650px;
  margin-left: 50px;
  margin-top: 8px;
  background: rgb(247, 248, 250);
  box-sizing: border-box;
  padding: 10px;
}
.s_hotreply{
  display: flex;
}
.s_replypic{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 20px;
}
.s_replypic img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.s_replynav{
  display: flex;
  align-items: center;
  font-size: 14px;
}
.s_replyuser{
  font-weight: bold;
  color: #333;
}
.s_replytime{
  color: #777;
}
/* 二级回复 */
.s_secondreply{
  display: none;
  width: 600px;
  margin-left: 40px;
  box-sizing: border-box;
  padding: 10px;
  background: #d7d7d7;
}
.s_secondreply .two_head{
  visibility: visible;
  padding:25px 0;
}
.s_secondreply .two_up{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.two_up textarea{
  width: 630px;
  min-height: 55px;
  background-color: #F4F5F5;
  border: 1px solid #fff;
  outline: none;
  text-indent: 1em;
  resize: none;
  font-size: 14px;
  padding: 10px 0;
  font-family: sans-serif;
  overflow: hidden;
}
.two_down{
  position: relative;
  visibility: visible;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
}
.two_down .two_left{
  font-size: 14px;
  color: #4e5969;
  margin-left: 50px;
}
.two_left span{
  cursor: pointer;
  visibility: hidden;
}
.two_left span:last-child{
  margin-left: 15px;
}
.two_right span{
  font-size: 14px;
  margin-right: 10px;
  color: #86909c;
  font-size:16px;
  visibility: hidden;
}
.two_right button{
  width: 92px;
  height: 36px;
  border: none;
  background-color: #c9cdd4;
  color: #fff;
  cursor: pointer;
}
</style>